<template>
  <div class="move-dialog">
      <el-dialog 
        title="移动到" 
        v-model="show"
        :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-tree
          style="height: 450px; overflow: auto;"
          :data="data"
          :props="defaultProps"
          node-key="id"
          :highlight-current="true"
          @node-click="handleNodeClick"
          >

          <template #default="{ node, data }">
          <span style="display: flex; align-items: start; ">
              <img v-if="data.children " src="../assets/img/Dir.svg" style="width: 20px; height: 20px; margin-right: 2px; vertical-align: middle;">
              <img v-else src="../assets/img/File.svg" style="width: 18px; height: 18px; margin-right: 2px;  vertical-align: middle;">
              <span>{{ data.label}}</span>
          </span>
          </template>
      </el-tree>

      <template #footer>
        <div class="dialog-footer">
          <el-button  type="info" @click="closeDialog()">取消</el-button>
          <el-button type="primary" @click="submitInput()">确定</el-button>
        </div>
      </template>

  </el-dialog>
  </div>
    
    

</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useConfigStore } from '../stores/config'
const configStore = useConfigStore()


const props = defineProps({
    nodeID: {
      type: String,
      required: true,
    },
    level: {
      type: Number,
      required: true,
    }
  })

const data = ref([])
const getMoveDir = async () => {
  data.value = await window.api.getMoveDir(props.nodeID)
}
getMoveDir()
const defaultProps = {
  children: 'children',
  label: 'label',
}

const destNodeID = ref(null)
const handleNodeClick = (node) => {
  destNodeID.value = node.id
}

const emit = defineEmits(['close', 'submit'])

const closeDialog = () => {
  show.value = false
  emit('close')
}

const submitInput = async () => {
  if(configStore.runningFlag){
      ElMessage.error({ message: '请先停止服务' });
      return
  }


  let res = null;
  if (props.nodeID.endsWith(".md")){
    res = await window.api.moveFile(props.nodeID, destNodeID.value)
  }else{
    res = await window.api.moveDir(props.nodeID, destNodeID.value)
  }
  show.value = false

  emit('submit', res)

}

const show  = ref(true)

</script>
  
<style lang="scss" scoped>
.move-dialog{

  :deep(.el-dialog) {
    height: 80vh; 
    overflow: auto;
    margin-top: 0;

    position: absolute; /* 使用绝对定位 */
    top: 50%; /* 距离顶部 50% */
    left: 50%; /* 距离左边 50% */
    transform: translate(-50%, -50%); /* 使用 transform 来精确调整位置，水平垂直居中 */

    
    user-select: none; // 禁止选中文字
  }

  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
    background-color: rgba(0, 0, 0, 0.3);
  }
  :deep(.el-tree>.el-tree-node){
    color:black

  }
  // el-tree换行
  :deep(.el-tree-node) {
        white-space: normal;
        .el-tree-node__content {
          align-items: start;
          height: 100%;
      }
  }
}
</style>